<template>
  <div class="home">
    <map-container>
      <template v-slot>
        <div class="main">
          <div class="left">
            <item-wrap style="height:60%;" title="各街道自助终端分布情况">
              <terminal />
            </item-wrap>
            <item-wrap style="height:34%;" title="服务事项统计">
              <div class="matters">
                <p class="title"><span>街道</span><span>数量</span></p>
                <div style="overflow:hidden">
                <p class="content" :style="'top:' + top + 'px'" v-for="(item, key) in matters" :key="key">
                  <span>{{item.street}}</span> <span>{{item.num}}</span>
                </p>
                </div>
              </div>
            </item-wrap>
          </div>
          <div class="right">
            <item-wrap style="height:35%;" title="便民场所类型">
              <bianmin />
            </item-wrap>
            <item-wrap style="height:60%;" title="各街道场所分布情况">
              <street />
            </item-wrap>
          </div>
        </div>
      </template>
    </map-container>
  </div>
</template>

<script>
import MapContainer from "@/components/MapContainer.vue";
import ItemWrap from '@/components/item-wrap/item-wrap.vue'
import Terminal from '@/views/gov/echarts.vue/terminal.vue'
import Street from '@/views/gov/echarts.vue/street.vue'
import Bianmin from '@/views/gov/echarts.vue/bianmin.vue'
var AMap
var timer
export default {
  name: 'HomeView',
  components: {
    MapContainer,
    ItemWrap,
    Terminal,
    Street,
    Bianmin
  },
  data() {
    return {
      matters: [],
      top: 60
    }
  },
  mounted() {
    this.getMatters()
  },
  methods: {
    getMatters() {
      this.$get('/zw/map/getMatters').then(res => {
        this.matters = res.data
        timer = setInterval(() => {
          this.top = this.top - 1
          if(this.top + this.matters.length*24 == 0) {
            this.top = 60
          }
        }, 30)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.main {
  display: flex;
  padding: 100px 50px 0;
  justify-content: space-between;
  height: 80vh;
}
.left {
  display: flex;
  width: 380px;
  // flex: 0 0;
  flex-direction: column;
  justify-content: space-between;
}
.right {
  display: flex;
  width: 380px;
  // flex: 0 0;
  flex-direction: column;
  justify-content: space-between;
}
.matters {
  width: 100%;
  height: 98%;
  color: #fff;
  overflow: hidden;
  .title {
    font-weight: 600;
    font-size: 16px;
  }
  p{
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
    text-align: left;
  }
  .content {
    position: relative;
    top: 0;
  }
}
</style>
